import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({
  components: {
    rendom: {
      functional: true,
      props: {
        render: {
          required: true
        },
        data: {
          required: true,
        },
        index: {
          required: false,
        }
      },
      render(h: any, context: any) {
        const { data, render, index } = context.props;
        return render(h, data, index)
      }
    }
  }
})
export default class CustomRender extends Vue {
  @Prop({
    required: false,
    default: () => '',
  }) text!: any;

  @Prop({
    required: false,
    default: () => '',
  }) record!: any

  @Prop({
    required: false,
    default: () => 0,
  }) index!: number

  @Prop({
    required: false,
    default: () => '',
  }) column!: any

  @Prop({
    required: false,
    default: () => [],
  }) cols!: any

  col: any = {};

  get componentType() {
    let type = 'text';
    for (let i = 0, length = this.cols.length; i < length; i++) {
      if (this.cols[i].dataIndex === this.column.dataIndex) {
        type = this.cols[i].componentType;
        this.col = this.cols[i];
        break;
      }
    }
    return type;
  }
}